<template>
  <el-checkbox-group v-model="checkList" style="width: 100%" @change="changeCheck">
    <div :id="hasPreview ? info._id : `diy_${info._id}`" v-ui-ref="vSetRef" class="ui-sd w-full" style="height: 915px">
      <div class="btn_group flex">
        <div class="ml-4" @click="backKu">回库</div>
        <div class="ml-4" @click="changeBox">换箱</div>
        <div class="ml-4" @click="print">打印</div>
      </div>
      <div class="btn_left flex">
        <div class="ml-4 flex">
          <div>当前订单号：</div>
          <div>{{ orderNo }}</div>
        </div>
        <div
          class="ml-4 flex"
          :class="{
            disabled: CONFIG_VALUE != 3 || disabledFlag,
          }"
        >
          <div>当前周转箱号：</div>
          <div>
            <input
              ref="input"
              v-model="text"
              :disabled="CONFIG_VALUE != 3 || disabledFlag"
              :style="{
                background: 'rgba(0,0,0,0)',
                color: '#fff',
                width: '90%',
                margin: '0 5%',
                'font-weight': 600,
                'font-size': 17 + 'px',
                'text-align': 'center',
              }"
              @keydown="enterKey"
              @keyup="enterKeyup"
            />
          </div>
        </div>
      </div>
      <div class="box-card">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="card"
          :style="{
            background: {
              ZISE: '#5A32DC',
              LVESE: '#70B603',
              CHENGSE: '#F59A23',
            }[item.COLERS],
          }"
          @click.stop="openDeatil(item.LOCATION_ID, index)"
        >
          <div class="select" @click.stop><el-checkbox :label="item.LOCATION_ID" /></div>
          <div v-if="item['SKU']" class="w-full h-full">
            <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px">
              <div style="width: 85px; text-align: left">物料编码：</div>
              <div style="flex: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap">{{ item['SKU'] }}</div>
            </div>
            <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px">
              <div class="text-container" style="width: 100%; text-align: left">物料描述：{{ item['SKU_NAME'] }}</div>
            </div>
            <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 85px; text-align: left">库存数量：</div>
              <div style="flex: 1; overflow: hidden; text-overflow: ellipsis">{{ item['INV_QTY'] }}</div>
            </div>
            <!-- <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 55%; text-align: left">WMS批次：</div>
              <div style="width: 45%; overflow: hidden; text-overflow: ellipsis">{{ item['LOT_NUMBER'] }}</div>
            </div> -->
            <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 85px; text-align: left">料箱编号：</div>
              <div style="flex: 1; overflow: hidden; text-overflow: ellipsis">{{ item['TRACE_ID'] }}</div>
            </div>
            <!-- <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 55%; text-align: left">任务号：</div>
              <div style="width: 45%; overflow: hidden; text-overflow: ellipsis">{{ item['TASK_ID'] }}</div>
            </div> -->
            <!-- <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 85px; text-align: left">任务单号：</div>
              <div style="flex: 1; overflow: hidden; text-overflow: ellipsis">{{ item['RESERVED_FIELD02'] }}</div>
            </div> -->
            <div style="color: #fff; display: flex; line-height: 28px; font-size: 16px; word-break: break-all; white-space: nowrap">
              <div style="width: 85px; text-align: left">待拣数量：</div>
              <div style="flex: 1; overflow: hidden; text-overflow: ellipsis">{{ item['TASK_QTY'] }}</div>
            </div>
            <div
              style="
                color: #e3e3e1;
                position: absolute;
                z-index: 6;
                right: 10px;
                bottom: 5px;
                font-size: 16px;
                word-break: break-all;
                white-space: nowrap;
                cursor: pointer;
              "
              @click.stop="openDeatil(item.LOCATION_ID, index)"
            >
              >>
            </div>
          </div>
          <div
            v-if="activeIndex == index && item['SKU']"
            class="dialog"
            :style="`bottom: ${index <= 15 ? '-290px' : '20px'}; right: ${[5, 6, 7, 13, 14, 15, 21, 22, 23].includes(index) ? '20px' : '-490px'}`"
          >
            <div class="w-full overflow-auto" style="height: 89%">
              <div v-for="(c, i) in obj" :key="i" style="color: #fff; display: flex; line-height: 26px; font-size: 16px">
                <div style="width: 30%; text-align: right">{{ i }}：</div>
                <div style="width: 50%; overflow: hidden; text-overflow: ellipsis">{{ c }}</div>
              </div>
            </div>
            <el-pagination
              background
              class="mt-4"
              layout="prev, pager, next"
              :page-size="1"
              small
              style="margin-top: 10px"
              :total="total"
              @current-change="changePage"
            />
            <img
              alt=""
              src="./close.png"
              style="position: absolute; right: 35px; top: 10px; cursor: pointer; width: 25px; height: 25px"
              @click.stop="activeIndex = -1"
            />
          </div>
        </div>
        <div v-for="(item, index) in 24 - dataList.length >= 0 ? 24 - dataList.length : 0" :key="index" class="card" style="opacity: 0"></div>
      </div>
    </div>
  </el-checkbox-group>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import { print } from '@ve/utils/print'
  import { processingConstant } from '@/ve/utils/utils'
  export default defineComponent({
    name: 'UiSDPages',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin, ConditionMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        inter: null,
        inter2: null,
        detailList: [],
        total: 0,
        obj: {},
        disabledFlag: false,
        text: '',
        orderNo: 'default',
        disabled: false,
        CONFIG_VALUE: -1,
        dataList: [],
        list: {
          名字: 123,
          名字1: 123,
          名字2: 123,
          名字3: 123,
          名字4: 123,
          名字5: 123,
          名字6: 123,
          名字7: 123,
          名字8: 123213132123,
        },
        activeIndex: -1,
        formData: {},
        checkList: [],
      }
    },
    watch: {
      info: {
        handler(val) {
          console.log(val, '变化了-----------')
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
          })
        },
        deep: true,
      },
      disabledFlag(val) {
        if (val) {
          if (this.inter2) {
            clearInterval(this.inter2)
            this.inter2 = null
          }
          this.inter2 = setInterval(() => {
            this.getBoxId()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          clearInterval(this.inter2)
          this.inter2 = null
        }
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      this.$nextTick(() => {
        let arr = document.getElementsByClassName('component-box')
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index]
          element.addEventListener('click', () => {
            console.log(1111, this.activeIndex)
            if (this.activeIndex != -1) {
              this.activeIndex = -1
            }
          })
        }
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        const data = cloneDeep(this.infoComponent.extension.requestSet.value)
        this.$request(data, (res) => {
          console.log(res)
          if (res) {
            this.dataList = res
            this.orderNo = this.dataList[0].RESERVED_FIELD02
            if (this.CONFIG_VALUE != 3) {
              console.log(1)
              this.getBoxId()
            }
          }
        })
        const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data2.method = 'wms.common.configuration.query'
        data2.getDataKey = 'wms.common.configuration.query'
        data2.data = [
          { key: '#LIMIT#', value: '1' },
          { key: '#PAGE_SIZE#', value: '10' },
          { key: 'CONFIG_ID', value: 'CUS_CHANGEBOX' },
          { key: 'OWNER_ID', value: '*' },
          { key: 'BUSINESS_TYPE', value: '*' },
          { key: 'ORDER_TYPE', value: '*' },
        ]
        this.$request(data2, (res) => {
          this.CONFIG_VALUE = res[0].CONFIG_VALUE
          // this.CONFIG_VALUE = 3
        })
      },
      enterKey($event) {
        console.log('down')
        if ($event.keyCode == 13) {
          setTimeout(() => {
            this.$refs.input.focus()
          }, 1)
        }
      },
      enterKeyup($event) {
        if ($event.keyCode == 13) {
          this.disabledFlag = true
          const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
          data2.method = 'wms.sd.kanban.targetTraceId'
          data2.getDataKey = 'wms.sd.kanban.targetTraceId'
          data2.data = {
            TARGET_TRACE_ID: this.text,
            RESERVED_FIELD02: this.orderNo,
          }
          this.$request(data2, () => {
            this.$message.success('操作成功')
            this.checkList = []
          })
        }
      },
      changeBox() {
        if (this.CONFIG_VALUE == 3) {
          this.text = ''
          this.disabledFlag = false
          setTimeout(() => {
            this.$refs.input.focus()
          }, 1)
          return
        }
        const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data2.method = 'wms.sd.kanban.recycle'
        data2.getDataKey = 'wms.sd.kanban.recycle'
        data2.data = [
          { key: 'ACTION', value: 'HX' },
          { key: 'OWNER_ID', value: '*' },
          { key: 'SO_NO', value: this.orderNo },
          { key: 'FMLOCATION_ID', value: '' },
        ]
        this.$request(data2, (res) => {
          this.text = res.OUT_TARGET_TRACEID
          this.$message.success('操作成功')
        })
      },
      backKu() {
        if (this.checkList.length == 0) {
          this.$message.error('未勾选数据')
          return
        }
        const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data2.method = 'wms.sd.kanban.recycle'
        data2.getDataKey = 'wms.sd.kanban.recycle'
        this.checkList.map((item) => {
          data2.data = [
            { key: 'ACTION', value: 'HK' },
            { key: 'OWNER_ID', value: '*' },
            { key: 'SO_NO', value: '' },
            { key: 'FMLOCATION_ID', value: item },
          ]
          this.$request(data2, () => {
            this.$message.success('操作成功')
            this.getRequestData()
          })
        })
        this.checkList = []
      },
      changeCheck(e) {
        console.log(e)
      },
      openDeatil(id, index) {
        if (this.activeIndex !== -1 && this.activeIndex === index) {
          return
        }
        const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data2.method = 'wms.sd.kanban.details.query'
        data2.getDataKey = 'wms.sd.kanban.details.query'
        data2.data = [
          { key: '#LIMIT#', value: '1' },
          { key: '#PAGE_SIZE#', value: '10' },
          { key: 'LOCATION_ID', value: id },
        ]
        this.$request(data2, (res) => {
          this.activeIndex = index
          this.detailList = res
          this.total = res.length
          this.obj = this.detailList[0]
        })
      },
      changePage(e) {
        this.obj = this.detailList[e - 1]
      },
      getBoxId() {
        const data1 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data1.method = 'wms.sd.kanban.carton.query'
        data1.getDataKey = 'wms.sd.kanban.carton.query'
        data1.data = {
          SO_NO: this.orderNo,
          '#PAGE_SIZE#': 999,
          '#LIMIT#': 1,
        }
        this.$request(data1, (res) => {
          this.text = res[0]?.TARGET_TRACE_ID
        })
      },
      print() {
        if (!this.checkList.length) {
          this.$message.error('请勾选数据')
          return
        }
        const data2 = cloneDeep(this.infoComponent.extension.requestSet.value)
        data2.method = 'wms.print.test'
        data2.getDataKey = 'wms.print.test'
        data2.api = '/dams/dams-web'
        const data = data2.data.find((item) => item['key'] == 'BUSINESS_REPORT_CODE')
        data2.data = {
          REPORT_CODE: data?.value,
          PRINTTYPE: 'manual',
          MENU_NAME: '看板',
          PRINT_RESOURCE: '看板->' + data?.value,
          selectData: this.checkList.map((item) => {
            return { LOCATION_ID: item, ORG_ID: processingConstant(this, '#ORG_ID#'), WAREHOUSE_ID: processingConstant(this, '#WH_ID#') }
          }),
        }
        this.$request(data2, (res) => {
          this.$message.success('操作成功')
          console.log(res)
          print(res, this)
          this.checkList = []
        })
        // const data1 = cloneDeep(this.infoComponent.extension.requestSet.value)
        // data1.method = 'wms.sd.kanban.insert'
        // data1.getDataKey = 'wms.sd.kanban.insert'
        // data1.data = {
        //   TARGET_TRACE_ID: this.text,
        //   OPERATION_TYPE: 'TRACE_PRINT',
        // }
        // this.$request(data1, () => {
        // })
      },
    },
  })
</script>
<style lang="scss" scoped>
  .ui-sd {
    position: relative;
  }
  .btn_group {
    position: absolute;
    right: 180px;
    top: -70px;
  }
  .btn_left {
    position: absolute;
    left: 10px;
    top: -90px;
  }
  .btn_left > div {
    width: 200px;
    height: 80px;
    background: #fc9a77;
    border-radius: 7px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 1px;
    div:first-child {
      margin: 0 0 5px;
    }
  }
  .btn_left > div:last-child {
    background: #23a8ef;
  }
  .btn_group > div {
    width: 120px;
    line-height: 41px;
    border-radius: 8px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    letter-spacing: 3px;
    font-weight: bold;
    cursor: pointer;
    background: #2265a8;
  }
  .box-card {
    width: 100%;
    padding: 0 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    width: calc(calc(100% / 8) - 15px);
    height: 290px;
    background: #0b2545;
    border-radius: 6px;
    margin: 0 0 15px;
    padding: 10px 20px;
    position: relative;
  }
  .box-card :deep(.el-checkbox__label) {
    font-size: 18px !important;
    color: #fff;
  }
  .dialog {
    width: 500px;
    height: 300px;
    position: absolute;
    z-index: 9;
    background: #0673a6;
    font-size: 15px;
    overflow-y: hidden;
    padding: 10px;
  }
  input {
    outline: none;
    display: block;
  }
  .disabled {
    background: rgb(157, 153, 153, 0.6) !important;
    color: #ffffff;
    cursor: not-allowed;
  }
  input[disabled] {
    cursor: not-allowed;
  }
  .text-container {
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: -webkit-ellipsis-lastline;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>
